<template>
	<view class="container">
		<view v-if="false"  class="cell">
			<view class="cell-top">
				青少年素质教育舒服画征集
			</view>
			<view class="cell-line">
				
			</view>
			<view class="cell-title">
				报名时间
			</view>
			<view class="cell-btns">
				<view class="cell-btn">{{dateStr}}</view>
			</view>
	<!-- 		<view class="cell-title">
				参数日期
			</view>
			<view class="cell-btns" style="margin-bottom: 0;">
				<view class="cell-btn">绘画</view>
				<view class="cell-btn">书法</view>
			</view> -->
		</view>
		<view  class="cell">
			<view  class="cell-one">
				<view  class="cell-one-txt">姓名:</view>
				<view  class="cell-one-op">
				  <u--input
					placeholder="请输入姓名"
					border="surround"
					v-model="name"
				  ></u--input>
				</view>
			</view>
			<view  class="cell-one">
				<view  class="cell-one-txt">性别:</view>
				<view  class="cell-one-op">
				  <u-radio-group 
				      v-model="sex"
				      placement="row">
				  	<u-radio  label="男" name='0'></u-radio>
					&nbsp;&nbsp;&nbsp;
				  	<u-radio  label="女" name='1'></u-radio>
				  </u-radio-group>
				</view>
			</view>
			<view  class="cell-one">
				<view  class="cell-one-txt">电话号码:</view>
				<view  class="cell-one-op">
					<u--input
						maxlength="11"
						placeholder="请输入手机号码"
						border="surround"
						type="number"
						v-model="phone"
					></u--input>
				</view>
			</view>
			<view  class="cell-one">
				<view  class="cell-one-txt">身份证:</view>
				<view  class="cell-one-op">
					<u--input
						type="idcard"
						placeholder="请输入身份证"
						border="surround"
						v-model="card"
					></u--input>
				</view>
			</view>
			<view  class="cell-one">
				<view  class="cell-one-txt">年龄:</view>
				<view  class="cell-one-op">
					<u--input
						placeholder="请输入年龄"
						border="surround"
						type="number"
						v-model="age"
					></u--input>
				</view>
			</view>
			<view  class="cell-one">
				<view  class="cell-one-txt">省市区:</view>
				<view  class="cell-one-op">
					<picker mode="region" @change="onPickerChange">
						<view class="uni-input">{{shenAddress}}</view>
					</picker>
					
				</view>
			</view>
			<view  class="cell-one" style="margin-bottom: 0;">
				<view  class="cell-one-txt">详细地址:</view>
				<view  class="cell-one-op">
					<u--input
						placeholder="请输入详细地址"
						border="surround"
						v-model="xiangAddress"
					></u--input>
				</view>
			</view>
		</view>
		
		<u--form
			class="all-form"
			labelPosition="left"
			ref="uForm"
			labelWidth="auto"
		>
			<u-form-item
				label="参数组别:"	
				borderBottom
			>
				<view @click="showG = true"  class="select">
					 {{activityGroupName? activityGroupName: '请选择'}}
				</view>
			</u-form-item>
			<u-form-item
				label="活动类别:"
				borderBottom
			>
				<view @click="showActivity = true"  class="select">
					 {{activityTypeName? activityTypeName: '请选择'}}
				</view>
			</u-form-item>
			<u-form-item v-for="(item, index) in activityConfig"
					:label="item.name + ':'"
					prop="userInfo.name"
					borderBottom
					ref="item1"
			>
				<u--input v-if="item.type == 'textbox'"
					:placeholder="item.placeholder"
					v-model="item.value"
					border="none"
				></u--input>
				<!-- <u-radio-group
					v-if="item.type == 'radio'"
				    v-model="sex"
				    placement="row">
					<u-radio v-for="it in item.options"  :label="it.text" :name='it.value'></u-radio>

				</u-radio-group> -->
				<!-- <u--input
					v-if="item.type == 'radio'"
					@click="showOptions = true"
					disabled
					disabledColor="#ffffff"
					placeholder="请选择性别"
					border="none"
				></u--input> -->
				<view @click="onChooseFile(index)" v-if="item.type == 'uploadFile'" class="flie">
					上传文件
					<view v-if="item.value">{{fileName}}</view>
				</view>
				<view @click="onShowOptions(item, index)" v-if="item.type == 'radio'" class="select">
					{{item.value||'请选择'}}
				</view>
				
				<u-upload 
					v-if="item.type == 'uploadImage'"
					:fileList="item.value ? [{url: item.value}] : []"
					@afterRead="afterRead($event, index)"
					@delete="deletePic($event, index)"
					name="1"
					multiple
					:preview-full-image="false"
					:maxCount="1"
				></u-upload>
				<!-- <u-input
					v-if="item.type == 'uploadFile'"
					type='file'
					
				></u-input> -->
			</u-form-item>
			<u-form-item
			v-if="selectActIndex !== 999"
				label="上传作品:"
				borderBottom
			>
		
				<view @click="onChooseFile2()" v-if="assetList[selectActIndex].name == '文件'"  class="flie">
					上传文件
					<!-- <view v-if="item.value">{{fileName}}</view> -->
				</view>

				<u-upload
					v-if="assetList[selectActIndex].name == '图片'"
					:fileList="uploadAsset ? [{url: uploadAsset}] : []"
					@afterRead="afterRead2($event)"
					@delete="deletePic2($event)"
					name="1"
					multiple
					:preview-full-image="false"
					:maxCount="1"
				></u-upload>

				<u--input 
					v-if="assetList[selectActIndex].name == '网盘'"
					placeholder="填写网盘地址"
					v-model="uploadAsset"
					border="none"
				></u--input>
			</u-form-item>

			
			

		</u--form>
		
		<view class="btns">
			<view @click="kkk" class="btn-r">
				t提交
			</view>
		</view>
		
		<view class="kong">
			
		</view>
		
		<u-action-sheet
			:show="showOptions"
			:actions="actions"
			title="请选择"
			@close="showOptions = false"
			@select="optionSelect"
		></u-action-sheet>
		
		<u-action-sheet
			:show="showG"
			:actions="groups"
			title="请选择"
			@close="showG = false"
			@select="optionSelectG"
		></u-action-sheet>
		
		<u-action-sheet
			:show="showActivity"
			:actions="activityTypeActions"
			title="请选择"
			@close="showActivity = false"
			@select="optionActivity"
		></u-action-sheet>

	</view>
</template>

<script>
	import { playerAdd, playerInfo, playerEdit, orderDetail, activityDetail, orderEdit } from './indexServ.js'
	export default {
		name: 'template',
		data() {
			return{
				dateStr: (new Date()).getMonth() + 1 + '年' + (new Date()).getDate() + '日',
				keyword: '',
				show:false,
				id: '',
				name: '',
				sex: '0',
				card: '',
				phone: '',
				age: '',
				shenAddress: '请选择省市区',
				xiangAddress: '',
				orderId: '',
				activityId: 2009,
				activityConfig: [],
				activityTypeName: '',
				activityTypeActions:[],
				showActivity: false,
				groups: [],
				showOptions: false,
				actions: [],
				selectIndex: 0,
				showG: false,
				allDetail: {},
				linkAsset: '',
				activityGroupName: '',
				fileName: '',
				uploadAsset: '', // 文件地址、网盘链接、图片
				assetType: '', // 文件，图片，网盘
				assetList: [],
				selectActIndex:999,
				
			}
		},
		onLoad(op) {
			this.orderId = op.orderId
			// this.activityId = op.activityId
			this.GET_orderDetail({orderId: op.orderId})
			this.GET_activityDetail({activityId: this.activityId})
		},
		methods: {
			kkk() {
				console.log('---')
				console.log(this.activityConfig)
				this.allDetail.activityConfig = this.activityConfig
				this.allDetail.address =  this.shenAddress + '--' + this.xiangAddress
				this.allDetail.age = this.age
				this.allDetail.idCard = this.card
				this.allDetail.mobile = this.phone
				this.allDetail.playName = this.name
				this.allDetail.sex = this.sex
				this.allDetail.assetType = this.assetList[this.selectActIndex].name
				this.allDetail.uploadAsset = this.uploadAsset
			
				this.allDetail.activityGroupName = this.activityGroupName;
				this.allDetail.activityTypeName = this.activityTypeName
				// this.shenAddress = res.data.address.split('--')[0]
				// this.xiangAddress = res.data.address.split('--')[1]
				// this.age = res.data.prop1
				// this.sex = res.data.prop2
				// this.card = res.data.idCard
				// this.phone = res.data.mobile
				// this.name = res.data.playName
				
				this.POST_orderEdit(this.allDetail)
			},
			onChooseFile(index) {
				let that = this
				uni.chooseMessageFile({
				  count: 1, //默认100
				   type: 'file',
					success: function (res) {
						console.log('----chooseMessageFile--')
						console.log(res)
						// console.log(JSON.stringify(res.tempFilePaths));
						const {tempFiles} = res
						console.log(tempFiles)
						console.log(tempFiles[0])
						console.log(tempFiles[0].path)
						let { path } = tempFiles[0]
						uni.uploadFile({
							url: getApp().globalData.envParam.baseURL + '/api/order/upload',
							filePath: path,
							  name: 'file',
							  formData: {
							  },
							  success (res){
								console.log('---0990--')
								console.log(res)
								
								that.activityConfig[index].value = res.data.url
								that.fileName =  res.data.originalFilename
								console.log(this.activityConfig)
								// if (res.statusCode == 200) {
								// 	let d = JSON.parse(res.data)
								// 	console.log(d)
								// 	that.activityConfig[index].value = d.url
								// 	console.log('---===')
								// 	console.log(that.activityConfig)
								// }
								
							  },
							  fail(err) {
								  console.log(err)
							  }
							
						})
						
					},
					fail: function(err){
						console.log('-----onChooseFile--')
						console.log(err)
					}
				})
			},
			onChooseFile2() {
				let that = this
				uni.chooseMessageFile({
				  count: 1, //默认100
				   type: 'file',
					success: function (res) {
						console.log('----chooseMessageFile--')
						console.log(res)
						// console.log(JSON.stringify(res.tempFilePaths));
						const {tempFiles} = res
						console.log(tempFiles)
						console.log(tempFiles[0])
						console.log(tempFiles[0].path)
						let { path } = tempFiles[0]
						uni.uploadFile({
							url: getApp().globalData.envParam.baseURL + '/api/order/upload',
							filePath: path,
							  name: 'file',
							  formData: {
							  },
							  success (res){
								console.log('---0990--')
								console.log(res)
								that.uploadAsset = res.data.url
							  },
							  fail(err) {
								  console.log(err)
							  }
							
						})
						
					},
					fail: function(err){
						console.log('-----onChooseFile--')
						console.log(err)
					}
				})
			},
			optionSelectG(e) {
				console.log('---e')
				console.log(e)
				this.activityGroupName = e.name
			},
			optionActivity(e) {
				console.log('---e')
				console.log(e)
				this.activityTypeName = e.name
				this.selectActIndex = e.index
				this.uploadAsset = ''
			},
			
			optionSelect(e) {
				console.log('---optionSelect')
				console.log(e)
				this.activityConfig[this.selectIndex].value = e.value
			},
			onShowOptions(it, index) {
				console.log('--onShowOptions-')
				this.actions = it.options.map((item) => {
					item.name = item.text
					return item
				})
				this.selectIndex = index
				this.showOptions = true
			},
			deletePic(event, index) {
					console.log('---deletePic(event) {--')
					console.log(event)
					this.activityConfig[index].value = null
			},
			async afterRead(event, index) {
				console.log('----async afterRead(event) {--')
				console.log(index)
				console.log(event.file)
				let that = this
				uni.uploadFile({
					url: getApp().globalData.envParam.baseURL + '/api/order/upload',
					filePath: event.file[0].url,
					  name: 'file',
					  formData: {
					  },
					  success (res){
						if (res.statusCode == 200) {
							let d = JSON.parse(res.data)
							console.log(d)
							that.activityConfig[index].value = d.url
						}
						
					  }
					
				})
				
			},
			async afterRead2(event, index) {
				console.log('----async afterRead(event) {--')
				console.log(index)
				console.log(event.file)
				let that = this
				uni.uploadFile({
					url: getApp().globalData.envParam.baseURL + '/api/order/upload',
					filePath: event.file[0].url,
					  name: 'file',
					  formData: {
					  },
					  success (res){
						if (res.statusCode == 200) {
							let d = JSON.parse(res.data)
							console.log(d)
							that.uploadAsset = d.url
						}
						
					  }
					
				})
				
			},
			deletePic2(event, index) {
					console.log('---deletePic(event) {--')
					console.log(event)
					this.uploadAsset = null
			},
			// orderEdit
			async POST_orderEdit(p) {
				let res = await orderEdit(p)
				if(res.code == 200) {
					uni.showToast({
						title: '新增成功'
					})
				}
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					})
				},2000)	
			},
			
			onAdd() {

				if(this.name == '') {
					uni.showToast({
						title:'请输入名称',
						icon: 'none'
					})
					return
				}
				if(this.card == '') {
					uni.showToast({
						title:'请输入身份证号码',
						icon: 'none'
					})
					return
				}
				if(this.phone == '') {
					uni.showToast({
						title:'请输入电话号码',
						icon: 'none'
					})
					return
				}
				if(this.age == '') {
					uni.showToast({
						title:'请输入年龄',
						icon: 'none'
					})
					return
				}
				if(this.shenAddress == '请选择省市区') {
					uni.showToast({
						title:'请选择省市区',
						icon: 'none'
					})
					return
				}
				if(this.xiangAddress == '') {
					uni.showToast({
						title:'请输入详细地址',
						icon: 'none'
					})
					return
				}
				let k = {
					  "address": this.shenAddress + '--' + this.xiangAddress,
					  "age": this.age,
					  "idCard": this.card,
					  "mobile": this.phone,
					  "openId": uni.getStorageSync('openid'),
					  "playName": this.name,
					  "sex": this.sex,
				}
				if (this.id) {
					this.POST_editPlay({id: this.id, ...k})
				} else{
					this.POST_addPlay(k)
				}

			},
			onPickerChange(e) {
				console.log('--onPickerChange-')
				console.log(e.detail.value)
				let arr = e.detail.value
				this.shenAddress = arr.join('-')
			},
			// activityDetail
			async GET_orderDetail(p) {
				let res = await orderDetail(p)
				if(res.code == 200) {
					console.log(res.data)
					console.log(res.data.playName)
					this.allDetail = res.data
					// this.shenAddress = res.data.address.split('--')[0]
					// this.xiangAddress = res.data.address.split('--')[1]
					this.age = res.data.prop1
					this.sex = res.data.prop2
					this.card = res.data.idCard
					this.phone = res.data.mobile
					this.name = res.data.playName
					// this.shenAddress = res.data.address.split('--')[0]
					// this.xiangAddress = res.data.address.split('--')[1]
					// this.age = res.data.prop1
					// this.sex = res.data.prop2
					// this.card = res.data.idCard
					// this.phone = res.data.mobile
					// this.name = res.data.playName
				}	
			},
			async GET_activityDetail(p) {
				let res = await activityDetail(p)
				if(res.code == 200) {
					this.activityConfig = res.data.activityConfig
					let arr = res.data.params.groups.split(',')
					console.log('---.map(it => {text: it, value: it})--')
					
					this.groups = arr.map((it) => {
						return {
							name: it,
							value: it
						}
					})
					this.activityTypeActions = res.data.activityDetailType?.split(',').map((it,index) => {
						return {
							name: it,
							value: it,
							index: index
						}
					})
					this.assetList = res.data.prop1?.split(',').map((it, index) => {
						return{
							label: it,
							name: it, 
							index: index
						}
					})
					// activityTypeName
					console.log(this.groups)
				}	
			},
		
		}
	}
</script>
<style  lang="scss" scoped>
	
	.flie{
		display: flex;
		align-items: center;
		justify-content: center;
		height: 60rpx;
		padding: 4rpx 8rpx;
		box-sizing: border-box;
		border-radius: 4rpx;
		border: 1rpx solid #ccc;
		width: 200rpx;
		text-align: center;
	}
	.select{
		width: 100%;
		height: 60rpx;
		line-height: 60rpx;
		// background: pink;
	}
	/deep/ .u-border {
		border-style: none !important;
	}
	page{
		
	}
	.container{
		padding: 20rpx;
		box-sizing: border-box;
		background: #fff;
	}
	

	.cell{
		width: 100%;
		background: #fff;
		display: flex;
		flex-direction: column;
		// margin-bottom: 40rpx;
		// padding: 30rpx 30rpx 0 30rpx;
		box-sizing: border-box;
		border-radius: 30rpx;
		.cell-top{
			width: 100%;
			background: #fff;
			// padding: 30rpx;
			box-sizing: border-box;
			font-size: 22rpx;
			font-weight: bold;
		}
		.cell-line{
			width: 100%;
			height: 2rpx;
			background: #f4f4f4;
			margin: 30rpx 0;
		}
		.cell-title{
			width: 100%;
			color: #333;
			font-size: 38rpx;
			font-weight: bold;
			margin-bottom: 30rpx;
		}
		.cell-btns{
			width: 100%;
			align-items: center;
			margin-bottom: 40rpx;
			display: flex;
			.cell-btn{
				width: 320rpx;
				height: 60rpx;
				border-radius: 40rpx;
				background: #f4f4f4;
				margin-right: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 30rpx;
				color:#454545;
			}
		}
		.cell-one{
			width: 100%;
			height: 80rpx;
			display: flex;
			align-items: center;
			font-size: 15px;
			border-bottom: 1rpx solid #d6d7d9;
			margin-bottom: 30rpx;
			.cell-one-txt{
				width: 180rpx;
			}
			.cell-one-op{
				flex: 1;
			}
		}
	}
	
			
	.kong{
		width: 100%;
		height: 120rpx;
	}
	.uni-input{
		
	}
	.btns{
		width: 100%;
		height: 100rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		background: #f7f7fa;
		display: flex;
		.btn-l{
			height: 100rpx;
			flex: 1;
			border-right: 2rpx solid #e1e1e1;
			border-top: 2rpx solid #e1e1e1;
			display: flex;
			align-items: center;
			padding-left: 30rpx;
			box-sizing: border-box;
			color: #888888;
			font-size: 30rpx;
			.money{
				color: #e94f4f;
			}
		}
		.btn-r{
			width: 100%;
			height: 100rpx;
			background: #e94f4f;
			border-top: 2rpx solid #e94f4f;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			font-size: 32rpx;
		}
	}
	
	.u-form{
		padding: 0 30rpx;
		width: 100%;
	}

</style>